<template>
  <a-modal :visible="visible" :footer="null" :width="800" @cancel="onClose">
    <a-tabs type="card" class="aTabs">
      <a-tab-pane key="ant" tab="Ant Design Vue">
        <a-tabs style="margin: 0 20px;">
          <a-tab-pane
            v-for="item in iconList"
            :key="item.key"
            :tab="item.title"
          >
            <ul>
              <li v-for="(v, i) in item.data" :key="i" @click="submit(v)">
                <app-icon :value="v" />
              </li>
            </ul>
          </a-tab-pane>
        </a-tabs>
        <!-- <div v-for="item in iconList" :key="item.key">
          <a-divider v-if="item.title">
            {{ item.title }}
          </a-divider>
          <ul>
            <li v-for="(v, i) in item.data" :key="i" @click="submit(v)">
              <app-icon :value="v" />
            </li>
          </ul>
        </div> -->
      </a-tab-pane>
      <a-tab-pane key="iconfont" tab="iconfont">
        <ul>
          <li v-for="(v, i) in iconfontList" :key="i" @click="submit(v)">
            <app-icon :value="v" />
          </li>
        </ul>
      </a-tab-pane>
    </a-tabs>
    <div style="margin-top: 20px; color: #aaa; font-size: 12px;">
      请点击选择的图标
    </div>
  </a-modal>
</template>

<script>
export default {
  model: {
    //event:什么时候触发v-model行为
    event: "change-visible",
    // 定义传递给v-model的那个变量，绑定到哪个属性值上
    prop: "visible",
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      buttonCol: { span: 14, offset: 4 },
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      iconList: [
        {
          title: "方向性",
          key: "fxxtb",
          data: [
            "step-backward",
            "step-forward",
            "fast-backward",
            "fast-forward",
            "shrink",
            "arrows-alt",
            "up",
            "down",
            "left",
            "right",
            "caret-up",
            "caret-down",
            "caret-left",
            "caret-right",
            "up-circle",
            "down-circle",
            "left-circle",
            "right-circle",
            "double-left",
            "double-right",
            "vertical-left",
            "vertical-right",
            "vertical-align-top",
            "vertical-align-middle",
            "vertical-align-bottom",
            "forward",
            "backward",
            "rollback",
            "enter",
            "retweet",
            "swap",
            "swap-left",
            "swap-right",
            "arrow-up",
            "arrow-down",
            "arrow-left",
            "arrow-right",
            "play-circle",
            "up-square",
            "down-square",
            "left-square",
            "right-square",
            "login",
            "logout",
            "menu-fold",
            "menu-unfold",
            "border-bottom",
            "border-horizontal",
            "border-inner",
            "border-outer",
            "border-left",
            "border-right",
            "border-top",
            "border-verticle",
            "pic-center",
            "pic-left",
            "pic-right",
            "radius-bottomleft",
            "radius-bottomright",
            "radius-upleft",
            "radius-upright",
            "fullscreen",
            "fullscreen-exit",
          ],
        },
        {
          title: "提示建议性",
          key: "txjyxtb",
          data: [
            "question",
            "question-circle",
            "plus",
            "plus-circle",
            "pause",
            "pause-circle",
            "minus",
            "minus-circle",
            "plus-square",
            "minus-square",
            "info",
            "info-circle",
            "exclamation",
            "exclamation-circle",
            "close",
            "close-circle",
            "close-square",
            "check",
            "check-circle",
            "check-square",
            "clock-circle",
            "warning",
            "issues-close",
            "stop",
          ],
        },
        {
          title: "编辑类",
          key: "bjltb",
          data: [
            "edit",
            "form",
            "copy",
            "scissor",
            "delete",
            "snippets",
            "diff",
            "highlight",
            "align-center",
            "align-left",
            "align-right",
            "bg-colors",
            "bold",
            "italic",
            "underline",
            "strikethrough",
            "redo",
            "undo",
            "zoom-in",
            "zoom-out",
            "font-colors",
            "font-size",
            "line-height",
            "dash",
            "small-dash",
            "sort-ascending",
            "sort-descending",
            "drag",
            "ordered-list",
            "unordered-list",
            "radius-setting",
            "column-width",
            "column-height",
          ],
        },
        {
          title: "数据类",
          key: "sjltb",
          data: [
            "area-chart",
            "pie-chart",
            "bar-chart",
            "dot-chart",
            "line-chart",
            "radar-chart",
            "heat-map",
            "fall",
            "rise",
            "stock",
            "box-plot",
            "fund",
            "sliders",
          ],
        },
        {
          title: "品牌和标识",
          key: "pphbs",
          data: [
            "android",
            "apple",
            "windows",
            "ie",
            "chrome",
            "github",
            "aliwangwang",
            "dingding",
            "weibo-square",
            "weibo-square",
            "taobao-circle",
            "html5",
            "weibo",
            "twitter",
            "wechat",
            "youtube",
            "alipay-circle",
            "taobao",
            "skype",
            "qq",
            "medium-workmark",
            "gitlab",
            "medium",
            "linkedin",
            "google-plus",
            "dropbox",
            "facebook",
            "codepen",
            "code-sandbox",
            "amazon",
            "google",
            "codepen-circle",
            "alipay",
            "ant-design",
            "ant-cloud",
            "aliyun",
            "zhihu",
            "slack",
            "slack-square",
            "behance",
            "behance-square",
            "dribbble",
            "dribbble-square",
            "instagram",
            "yuque",
            "alibaba",
            "yahoo",
            "reddit",
            "sketch",
          ],
        },
        {
          title: "网站通用",
          key: "wzty",
          data: [
            "account-book",
            "alert",
            "api",
            "appstore",
            "audio",
            "bank",
            "bell",
            "book",
            "bug",
            "bulb",
            "calculator",
            "build",
            "calendar",
            "camera",
            "car",
            "carry-out",
            "cloud",
            "code",
            "compass",
            "contacts",
            "container",
            "control",
            "credit-card",
            "crown",
            "customer-service",
            "dashboard",
            "database",
            "dislike",
            "environment",
            "experiment",
            "eye-invisible",
            "eye",
            "file-add",
            "file-excel",
            "file-exclamation",
            "file-image",
            "file-markdown",
            "file-pdf",
            "file-ppt",
            "file-text",
            "file-unknown",
            "file-word",
            "file-zip",
            "file",
            "filter",
            "fire",
            "flag",
            "folder-add",
            "folder",
            "folder-open",
            "frown",
            "funnel-plot",
            "gift",
            "hdd",
            "heart",
            "home",
            "hourglass",
            "idcard",
            "insurance",
            "interaction",
            "layout",
            "like",
            "lock",
            "mail",
            "medicine-box",
            "meh",
            "message",
            "mobile",
            "money-collect",
            "pay-circle",
            "notification",
            "phone",
            "picture",
            "play-square",
            "printer",
            "profile",
            "project",
            "pushpin",
            "property-safety",
            "read",
            "reconciliation",
            "red-envelope",
            "rest",
            "rocket",
            "safety-certificate",
            "save",
            "schedule",
            "security-scan",
            "setting",
            "shop",
            "shopping",
            "skin",
            "smile",
            "sound",
            "star",
            "switcher",
            "tablet",
            "tag",
            "tags",
            "tool",
            "thunderbolt",
            "trophy",
            "unlock",
            "usb",
            "video-camera",
            "wallet",
            "apartment",
            "audit",
            "barcode",
            "bars",
            "block",
            "border",
            "branches",
            "ci",
            "cloud-download",
            "cloud-server",
            "cloud-sync",
            "cloud-upload",
            "cluster",
            "coffee",
            "copyright",
            "deployment-unit",
            "desktop",
            "disconnect",
            "dollar",
            "download",
            "ellipsis",
            "euro",
            "exception",
            "export",
            "file-done",
            "file-jpg",
            "file-protect",
            "file-sync",
            "file-search",
            "fork",
            "gateway",
            "global",
            "gold",
            "history",
            "import",
            "inbox",
            "key",
            "laptop",
            "link",
            "line",
            "loading-3-quarters",
            "loading",
            "man",
            "menu",
            "monitor",
            "more",
            "number",
            "percentage",
            "paper-clip",
            "pound",
            "poweroff",
            "pull-request",
            "qrcode",
            "reload",
            "safety",
            "robot",
            "scan",
            "search",
            "select",
            "shake",
            "share-alt",
            "shopping-cart",
            "solution",
            "sync",
            "table",
            "team",
            "to-top",
            "trademark",
            "transaction",
            "upload",
            "user-add",
            "user-delete",
            "usergroup-add",
            "user",
            "usergroup-delete",
            "wifi",
            "woman",
          ],
        },
      ],
      iconfontList: [],
    }
  },
  mounted() {
    var iconStr = require("../../../public/icon/iconfont.json")
    this.iconfontList = []
    for (let index in iconStr.glyphs) {
      this.iconfontList.push("#icon-" + iconStr.glyphs[index].font_class)
    }
  },
  methods: {
    onClose() {
      this.$emit("change-visible", false)
    },
    submit(val) {
      this.$emit("change", val)
      this.onClose()
    },
  },
}
</script>

<style lang="less" type="text/less" scoped>
.changeDiv {
  cursor: pointer;
}
.aTabs {
  margin: -10px;
  ul,
  li {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  ul {
    overflow: hidden;
  }
  li {
    float: left;
    text-align: center;
    width: 60px;
    height: 60px;
    line-height: 60px;
    cursor: pointer;
    border-radius: 10px;
    background: #fff;
    font-size: 28px;
  }
  li:hover {
    background: #aaa;
    color: #fff;
    font-size: 50px;
  }
}
</style>
